.steps-info-wrapper{
  &.display-flex{
    display: flex;
    .flex-item{
      flex: 1;
      position: relative;
      padding-top: 15px;
      &:first-child{
        text-align: left;
        .dot{
          left: 0;
        }
      }
      &:last-child{
        text-align: right;
        .dot{
          left: auto;
          right: 0;
        }
      }
      &.active{
        .line{
          background: #4B8DFF;
        }
        .dot{
          background: #4B8DFF;
          box-shadow: 0 0 3px #4B8DFF;
        }
        .title{
          color: #4B8DFF;
        }
      }
      .line{
        position: absolute;
        width: 100%;
        height: 4px;
        background: $table-border;
        top: 3px;
      }
      .dot{
        position: absolute;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background: #ebf0f5;
        box-shadow: 0 0 3px #ebf0f5;
        left: 50%;
        top: 0;
        margin-left: -5px;
      }
      .title{
        font-size: 12px;
        color: #B5C0CE;;
      }
    }
  }
}
